<template>
  <div class="index_main">
    <div class="index_mainleft">
      <div class="index_mainleftP1">检查方式及分类</div>
      <div class="index_mainleftP2">
        <div
          @click="handleModalityId(item)"
          class="index_mainleftP3"
          :class="item.modalityId == modalityId ? 'active' : ''"
          v-for="(item, index) in modalitys"
          :key="item.modalityId"
          >{{ item.modalityName }}</div
        >
      </div>
      <div class="index_mainleftP4 beautifulScroll">
        <div
          @click="handlebodyId(item)"
          class="index_mainleftP5"
          :class="item.bodyId == bodyId ? 'active' : ''"
          v-for="(item, index) in bodys"
          :key="item.bodyId"
        >
          <img :src="item.unselectIcon" class="normal" />
          <img :src="item.selectIcon" class="active" />
          <span>{{ item.bodyName }}</span>
        </div>
      </div>
    </div>
    <div class="index_mainright beautifulScroll" v-loading="loading">
      <div class="index_mainlist clearfix">
        <div class="index_mainlist_search solo">
          <el-input
            @keyup.enter.native="currentChange(1)"
            placeholder="请输入影像名称"
            prefix-icon="el-icon-search"
            v-model="dcmName"
            size="small"
            style="width: 200px; margin: 0 10px 0 0"
            clearable
            :disabled="atlasshow"
          />
          <el-button
            type="primary"
            @click="currentChange(1)"
            size="small"
            :disabled="atlasshow"
            >搜索</el-button
          >
          <el-button
            type="primary"
            @click="research"
            size="small"
            :disabled="atlasshow"
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="atlasshowfn"
            size="small"
            v-if="bodyId && modalityId"
            >{{ atlasshow ? '退出解剖图谱' : '进入解剖图谱' }}</el-button
          >
          <div class="r" v-if="!atlasshow">
            <el-dropdown @command="handleCommand">
              <div class="pointer">
                <span v-if="!sort">筛选</span>
                <span v-if="sort && sort == item.value" v-for="item in sorts">{{
                  item.label
                }}</span>
                <i class="el-icon-caret-bottom"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="item.value" v-for="item in sorts">{{
                  item.label
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <emptymain
          :emptytext="'暂无数据'"
          :emptyheight="'600px'"
          :emptylist="dataList"
        >
          <span></span>
        </emptymain>
        <div class="clearfix" v-if="!atlasshow">
          <div
            class="dcm_item"
            @click.stop="openDetail(item)"
            v-for="item in dataList"
          >
            <div class="dcm_itemicon">
              <img :src="basedcm + item.imageUrl" />
              <div class="dcm_itembody">{{ item.modalityName }}</div>
            </div>
            <div class="dcm_itemP1 text-ellipsis">{{ item.dcmName }}</div>
            <div class="dcm_itemP2 text-ellipsis"
              ><i class="el-icon-s-custom"></i>浏览人数:{{
                item.viewNumber || 0
              }}</div
            >
          </div>
        </div>
      </div>
      <div class="index_mainpages top" v-if="!atlasshow">
        <el-pagination
          hide-on-single-page
          background
          @current-change="currentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 新增图谱列表 -->
      <atlas-list
        :bodyId="bodyId"
        :modalityId="modalityId"
        :tplistdata="tplistdata"
        v-if="atlasshow"
      />
    </div>
  </div>
</template>

<script>
  import {
    modalityList,
    bodyNumber,
    imageList,
    collectImg,
  } from '@/api/image.js';
  import atlasList from '../../components/atlasList.vue';
  import { atlasLists } from '@/api/atlas.js';
  export default {
    components: { atlasList },
    data() {
      return {
        loading: true,
        bodyId: '',
        modalityId: '',
        dcmName: '',
        sort: '',
        modalitys: [],
        bodys: [],
        atlasshow: false,
        sorts: [
          {
            value: '1',
            label: '浏览人数由多到少',
          },
          {
            value: '2',
            label: '浏览人数由少到多',
          },
          {
            value: '3',
            label: '我收藏的',
          },
        ],
        dataList: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        tplistdata: [],
      };
    },
    created() {
      this.getModalityList();
    },
    mounted() {},
    methods: {
      // 处理图谱
      async atlasshowfn() {
        if (!this.atlasshow) {
          await this.getatlasList(); // 等待数据获取完成
        }

        this.atlasshow = !this.atlasshow;
      },
      //   获取图谱函数
      getatlasList() {
        atlasLists({
          bodyId: this.bodyId,
          modalityId: this.modalityId,
        }).then((res) => {
          this.tplistdata = res.data;
          //   this.total = res.data.length;
          //   this.updateShowList(); // 初始分页数据
        });
      },
      // 处理图谱函数完成
      getModalityList() {
        modalityList({}).then((res) => {
          this.modalitys = res.data || [];
          if (this.modalitys && this.modalitys.length > 0) {
            this.handleModalityId(this.modalitys[0]);
          } else {
            this.loading = false;
          }
        });
      },
      handleModalityId(item) {
        if (this.modalityId != item.modalityId) {
          this.modalityId = item.modalityId;
        } else {
          this.modalityId = '';
        }
        this.bodyId = '';
        this.getBodyNumber();
        this.currentChange(1);
        if (this.atlasshow) {
          this.getatlasList(); // 等待数据获取完成
        }
      },
      handlebodyId(item) {
        if (this.bodyId != item.bodyId) {
          this.bodyId = item.bodyId;
          this.currentChange(1);
        }
        if (this.atlasshow) {
          this.getatlasList(); // 等待数据获取完成
        }
      },
      getBodyNumber() {
        bodyNumber({
          modalityId: this.modalityId,
        }).then((res) => {
          this.bodys = res.data || [];
        });
      },
      handleCommand(sort) {
        this.sort = sort;
        this.getDataList();
      },
      research() {
        this.dcmName = '';
        this.sort = '';
        this.currentChange(1);
      },
      currentChange(pageNum) {
        this.pageNum = pageNum;
        this.getDataList();
      },
      getDataList() {
        this.loading = true;
        imageList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          bodyId: this.bodyId,
          modalityId: this.modalityId,
          dcmName: this.dcmName,
          sort: this.sort,
        })
          .then((res) => {
            this.dataList = res.data.list;
            this.total = res.data.total;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      checkCollect(item, collect) {
        collectImg({
          dcmId: item.dcmId,
          collect,
        }).then((res) => {
          if (res.code == 200) {
            this.getDataList();
          } else {
            this.$message({
              type: 'error',
              message: res.message,
            });
          }
        });
      },
      openDetail(item) {
        if (!item.stuuid) {
          this.$message({
            type: 'error',
            message: '暂无影像图片',
          });
          return;
        }
        const routeUrl = this.$router.resolve({
          name: 'imagedetail',
          query: {
            dcmId: item.dcmId,
            stuuid: item.stuuid,
          },
        });
        window.open(routeUrl.href, '_blank');
      },
    },
  };
</script>
